<template>
  <div class="content-div">
    <div class="title-div">请填写本人身份信息</div>
    <van-field class="mb8" v-model="formItem.name" label="真实姓名" placeholder="请输入真实姓名" input-align="right" />
    <van-field class="mb8" v-model="formItem.card_no" label="身份证号" placeholder="请输入身份证号" input-align="right" />
    <div class="title-div">请上传身份证</div>
    <div class="card-img-div">
      <van-row type="flex" justify="center">
        <van-col span="10">
          <span>身份证头像面</span>
        </van-col>
        <van-col offset="2" span="11">
          <div>
            <van-uploader v-if="formItem.front_card == '' || formItem.front_card == undefined " :after-read="afterReadZm" />
            <img v-show="formItem.front_card !== '' && formItem.front_card !== undefined" :src="front_card" alt="">
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="mb8 card-img-div">
      <van-row type="flex" justify="center">
        <van-col span="10">
          <span>身份证国徽面</span>
        </van-col>
        <van-col offset="2" span="11">
          <div>
            <van-uploader v-if="formItem.opposite_card == '' || formItem.opposite_card == undefined" :after-read="afterReadFm" />
            <img v-show="formItem.opposite_card !== '' && formItem.opposite_card !== undefined " :src="opposite_card" alt="">
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="title-div">请填写个人资料</div>
    <van-field class="mb8" v-model="formItem.tel" label="手机号码" placeholder="请输入手机号码" input-align="right" />
    <!-- <van-field @click="showAgency = true" class="mb8" v-model="formItem.jg" label="机构" readonly="" placeholder="请选择机构" right-icon="arrow" input-align="right" />
    <van-popup v-model="showAgency" position="bottom">
      <van-picker
        title="机构"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-field @click="showAgency1 = true" class="mb8" v-model="formItem.jg" label="陪诊项目" readonly="" placeholder="请选择陪诊项目" right-icon="arrow" input-align="right" />
    <van-popup v-model="showAgency1" position="bottom">
      <van-picker
        title="机构"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup> -->
    <van-field class="mb8" v-model="formItem.nurse_age" type="digit" label="护龄" placeholder="请输入护龄" input-align="right" />
    <van-field class="mb8" v-model="formItem.address" label="家庭住址" placeholder="请输入家庭住址" input-align="right" />
    <van-field class="mb8" v-model="formItem.native_place" label="籍贯" placeholder="请输入籍贯" input-align="right" />
    <div class="title-div">请上传资格证书</div>
    <div class="mb8 card-img-div flex">
      <div v-for="(item, index) in fileList" v-bind:key="index" style="position: relative;">
        <img :src="item" alt="" style="width:80px;margin-right:10px;position: relative;">
        <van-icon name="delete-o" @click="deleteImg(index)" style="position: absolute;left: 64px;background-color: black;color: white;" />
      </div>
      <van-uploader :after-read="afterRead" :max-count="3" multiple />
    </div>
    <div class="title-div">请上传体检报告</div>
    <div class="mb8 card-img-div flex">
      <div v-for="(item, index) in fileList1" v-bind:key="index" style="position: relative;">
        <img :src="item" alt="" style="width:80px;margin-right:10px;position: relative;">
        <van-icon name="delete-o" @click="deleteImg1(index)" style="position: absolute;left: 64px;background-color: black;color: white;" />
      </div>
      <van-uploader :after-read="afterRead1" :max-count="3" multiple />
    </div>
    <div class="gn-btn-box" v-if="formItem.state !== '2'">
      <div class="gn-btn" @click="authentication()">立即认证</div>
    </div>
  </div>
</template>
<script>
import { getQualification, saveAccompanyingPhysician } from '@/api/medicalWaiter.js'
import { getSignToHadoop, uploadFilesToHadoop } from '@/api/medical.js'
import { Toast } from 'vant'
export default {
  name: 'physicianAuthentication',
  data () {
    return {
      columns: ['机构1', '机构2'],
      showAgency: false,
      showAgency1: false,
      formItem: {
      },
      fileList: [],
      urlList: [],
      fileList1: [],
      urlList1: [],
      front_card: '',
      opposite_card: ''
    }
  },
  computed: {
    accompanying_physician_id () {
      return this.$store.state.user.severUserInfo.accompanying_physician_id
    }
  },
  methods: {
    onConfirm (value) {
      this.formItem.jg = value
      this.showAgency = false
    },
    onCancel () {
      this.showAgency = false
    },
    onChange () {},
    authentication () { // 立即认证
      this.formItem.qualification = this.fileList.join(',')
      this.formItem.medical_report = this.fileList1.join(',')
      this.formItem.province = this.$store.state.app.city.province_code
      this.formItem.city = this.$store.state.app.city.city_code
      saveAccompanyingPhysician(this.formItem).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('认证成功')
          this.$router.push('/home-waiter')
          return
        }
        Toast.success(res.data.errmsg)
      })
    },
    getQualificationInfo () {
      getQualification({ accompanying_physician_id: this.accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.formItem = res.data.data
          this.front_card = res.data.data.front_card
          this.opposite_card = res.data.data.opposite_card
          this.fileList = res.data.data.qualification.split(',')
          this.fileList1 = res.data.data.medical_report.split(',')
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    afterRead (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.fileList.push(ret.data.data)
              // this.formItem.qualification = ret.data.data
              // this.fileList = [{
              //   url: ret.data.data
              // }]
            }
          })
        }
      })
    },
    deleteImg (index) {
      this.fileList.splice(index, 1)
    },
    deleteImg1 (index) {
      this.fileList1.splice(index, 1)
    },
    afterRead1 (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.fileList1.push(ret.data.data)
              // this.formItem.qualification = ret.data.data
              // this.fileList = [{
              //   url: ret.data.data
              // }]
            }
          })
        }
      })
    },
    afterReadZm (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.formItem.front_card = ret.data.data
              this.front_card = ret.data.data
              console.log(this.formItem.front_card)
              // this.formItem.qualification = ret.data.data
              // this.fileList = [{
              //   url: ret.data.data
              // }]
            }
          })
        }
      })
    },
    afterReadFm (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.formItem.opposite_card = ret.data.data
              this.opposite_card = ret.data.data
              // this.formItem.qualification = ret.data.data
              // this.fileList = [{
              //   url: ret.data.data
              // }]
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getQualificationInfo()
  }
}
</script>
<style scoped lang="less">
  .content-div {
    background-color: #f8f8f8;
    padding: 10px 10px 64px 10px;
    height: auto;
    .card-div {
      background-color: #FFFFFF;
      padding: 15px 10px;
    }
    .card-img-div {
      padding: 10px;
      background-color: #FFFFFF;
      height: auto;
      img {
        width: 100px;
        height: 80px;
      }
      .van-icon-delete-o:before {
        color: white;
      }
    }
    .title-div {
      left: 10px;
      height: 17px;
      font-size: 12px;
      font-weight: 700;
      margin-left: 1px;
      margin-bottom: 13px;
      position: relative;
    }
    .title-div::before {
      position: absolute;
      content: '';
      width: 2px;
      height: 8px;
      left: -10px;
      top: 5px;
      background-color:#1989fa;
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      bottom: 50px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
      .gn-btn1{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: #1989fa;
        color: #f8f8f8;
        border-radius: 6px;
        box-sizing: border-box;
        width: 63%;
      }
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
  }
</style>
